<template>
  <Dialog
    :title="dialogTitle"
    :model-value="dialogVisible"
    :scroll="true"
    @close="
      () => {
        emit('close')
      }
    "
  >
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="可用" name="first">
        <el-row class="discount-coupon-list-box w-full" :gutter="10">
          <el-col
            :xs="12"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            v-for="(item, index) in state.couponInfo.items.filter((coupon: any) => coupon.match)"
            class="mb-10px"
            :key="index"
          >
            <el-row
              class="discount-coupon-item"
              :class="{ 'discount-coupon-item-active': item.payStatus }"
              @click.stop="selectPayMent(index)"
            >
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="!h-full !w-full">
                <div class="pos-relative !h-full !w-full flex flex-col justify-center items-center">
                  <div class="top-cricle">
                    <!-- 上圆圈 -->
                  </div>
                  <div class="bottom-cricle">
                    <!-- 下圆圈 -->
                  </div>
                  <div class="custom-text-16 coupn-num">
                    {{
                      item.discountType === 1
                        ? fenToYuan(item.discountPrice)
                        : item.discountPercent / 10.0
                    }}
                    {{ item.discountType === 2 ? '折' : '元' }}
                  </div>
                  <div class="mt-10px">
                    <el-tag>{{ item.discountType === 1 ? '满减券' : '折扣券' }}</el-tag>
                  </div>
                  <div class="custom-text-12 mt-10px c-[var(--el-color-primary)]!">
                    满 {{ fenToYuan(item.usePrice) }} 可用
                  </div>
                </div>
              </el-col>
              <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="!h-full !w-full">
                <div class="pos-relative !h-full !w-full flex flex-col justify-center items-center">
                  <div class="mb-10px">
                    <el-tag> ID:{{ item.assetsId }} {{ item.assetsTitle }}</el-tag>
                  </div>
                  <div class="custom-text-12" v-if="item.validityType === 2">
                    有效期：领取后 {{ item.fixedEndTerm }} 天内可用
                  </div>
                  <div class="custom-text-12" v-else>
                    有效期: {{ formatDate(item.validStartTime) }} 至
                    {{ formatDate(item.validEndTime) }}
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row></el-tab-pane
      >
      <el-tab-pane label="不可用" name="second">
        <el-row class="discount-coupon-list-box w-full" :gutter="10">
          <el-col
            :xs="12"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            v-for="(item, index) in state.couponInfo.items.filter((coupon: any) => !coupon.match)"
            class="mb-10px"
            :key="index"
          >
            <el-row
              class="discount-coupon-item"
              :class="{ 'discount-coupon-item-active': item.payStatus }"
            >
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="!h-full !w-full">
                <div class="pos-relative !h-full !w-full flex flex-col justify-center items-center">
                  <div class="top-cricle">
                    <!-- 上圆圈 -->
                  </div>
                  <div class="bottom-cricle">
                    <!-- 下圆圈 -->
                  </div>
                  <div class="custom-text-16 coupn-num">
                    {{
                      item.discountType === 1
                        ? fenToYuan(item.discountPrice)
                        : item.discountPercent / 10.0
                    }}
                    {{ item.discountType === 2 ? '折' : '元' }}
                  </div>
                  <div class="mt-10px">
                    <el-tag>{{ item.discountType === 1 ? '满减券' : '折扣券' }}</el-tag>
                  </div>
                  <div class="custom-text-12 mt-10px c-[var(--el-color-primary)]!">
                    满 {{ fenToYuan(item.usePrice) }} 可用
                  </div>
                </div>
              </el-col>
              <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="!h-full !w-full">
                <div class="pos-relative !h-full !w-full flex flex-col justify-center items-center">
                  <div class="mb-10px">
                    <el-tag> ID:{{ item.assetsId }} {{ item.assetsTitle }}</el-tag>
                  </div>
                  <div class="custom-text-12" v-if="item.validityType === 2">
                    有效期：领取后 {{ item.fixedEndTerm }} 天内可用
                  </div>
                  <div class="custom-text-12" v-else>
                    有效期: {{ formatDate(item.validStartTime) }} 至
                    {{ formatDate(item.validEndTime) }}
                  </div>
                  <div class="mt-10px custom-text-12">
                    不可用原因: {{ item.mismatchReason || '未达到使用门槛' }}</div
                  >
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row></el-tab-pane
      >
    </el-tabs>

    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
/**
 * 优惠券弹框
 */
defineOptions({ name: 'DiscountCouponPaymentDialog' })

const props = defineProps({
  modelValue: propTypes.object, //优惠券信息
  dialogVisible: propTypes.bool.def(false)
})
const activeName = ref('first')
/** 购物车信息 */
import { propTypes } from '@/utils/propTypes'

const dialogTitle = ref('选择优惠券') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const state = reactive({
  couponInfo: computed(() => props.modelValue) as any, // 优惠劵列表
  couponId: undefined // 选中的优惠劵编号
})
/** 提交表单 */
const emit = defineEmits(['confirm', 'close'])
const submitForm = async () => {
  // 校验表单
  // emit('confirm', state.couponId)
  emit('close')
}
const close = async () => {
  // 校验表单
  emit('close')
}

const nowPaymentIndex = ref<any>() //当前支付方式的下标
const selectPayMent = (index: any) => {
  nowPaymentIndex.value = index
  let item = state.couponInfo.items[nowPaymentIndex.value]
  item.payStatus = !item.payStatus

  emit('confirm', item, state.couponInfo.classify)
}
</script>
<style lang="scss" scoped>
.discount-coupon-list-box {
  .discount-coupon-item {
    display: flex;
    width: 100%;
    height: 110px;
    align-content: center;
    align-items: center;
    border-radius: var(--el-border-radius);
    border: 1px solid var(--el-border-color-light);
    background: #f4f4f4;

    position: relative;
    color: var(--el-text-color-secondary);

    .circle {
      display: flex;
      width: 13px;
      height: 13px;
      background: var(--el-color-white);
    }

    .top-cricle {
      position: absolute;
      right: 0;
      top: -5px;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      @extend .circle;
    }

    .bottom-cricle {
      position: absolute;
      right: 0;
      bottom: -5px;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;

      @extend .circle;
    }

    .coupon-lable {
      border: 1px solid var(--el-text-color-secondary);
      border-radius: 12px;
      padding: 1px 10px;
    }
    .coupn-num {
      color: var(--el-color-primary);
    }

    .coupon-id {
      font-weight: 400;

      margin-top: 5px;
    }

    .title-box {
      position: relative;
      top: -10px;
    }

    &:hover {
      cursor: pointer;
      border: 1px solid var(--el-color-primary);
      transition: all 0.3s ease;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
      border-radius: var(--meton-border-radius);
    }

    &-active {
      cursor: pointer;
      border: 1px solid var(--el-color-primary);
      transition: all 0.3s ease;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
      border-radius: var(--meton-border-radius);
      color: var(--el-color-primary);

      .item-left {
        border-right: 1px dashed var(--el-color-primary) !important;
      }

      .coupon-lable {
        border: 1px solid var(--el-color-primary) !important;
        border-radius: 12px;
        padding: 1px 5px;
      }
    }
  }
}
</style>
